import React from "react";
import { NavBar } from "react-vant";
import { useNavigate } from "react-router-dom";
import { Selector, Cell, Input, Uploader, Toast } from "react-vant";
import http from "../../utils/http";
import styles from "./index.module.css";
import { Button } from "antd-mobile";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const hanupload = async () => {
    const res = await http.post("/upload");
    const { code } = res.data;
    if (code === 20000) {
      Toast.success("上传成功");
    }
  };
  const options = [
    {
      label: "功能异常",
      value: "1",
    },
    {
      label: "优化建议",
      value: "2",
    },
    {
      label: "其他反馈",
      value: "3",
    },
  ];
  return (
    <div>
      <NavBar title="意见反馈" onClickLeft={() => navigate("/my")} />
      <div className={styles.yijian}>
        <h3>问题反馈类型</h3>
        {/* tab切换 */}
        <div className={styles.card}>
          <Selector
            style={{
              "--rv-selector-border-radius": "1vw",
              "--rv-selector-padding": "5px 15px",
              "--rv-selector-checked-color": "#1e6fff",
              "--rv-selector-checked-text-color": "#fff",
              "--rv-selector-margin": "0 3.8vw",
            }}
            showCheckMark={false}
            options={options}
            defaultValue={["1"]}
          />
        </div>
        {/* 文本输入 */}
        <div className={styles.wen}>
          <Cell style={{ marginTop: 10 }}>
            <Input.TextArea
              placeholder="请输入您想反馈的内容..."
              maxLength={500}
              showWordLimit
              autoSize
              style={{ height: "20vh", borderBottom: "1px solid #f6f6f6" }}
            />
          </Cell>
        </div>
        {/* 图片上传 */}
        <div className={styles.img}>
          <h3>
            添加图片
            <span style={{ color: "#8f8f8f", fontSize: "4vw" }}>
              (选填，最多4张)
            </span>
          </h3>
          <Uploader
            multiple
            upload={hanupload}
            maxCount={4}
            maxSize={15 * 1024}
            onOversize={() => Toast.info("文件大小不能超过15kb")}
            className={styles.upload}
          />
        </div>
      </div>
      <div className={styles.btn}>
        <Button
          style={{
            background: "#1e6fff",
            color: "#fff",
            width: "91vw",
            height: "12vw",
            marginLeft: "4vw",
            marginTop: "3.5vw",
            borderRadius: "2vw",
          }}
        >
          提交
        </Button>
      </div>
    </div>
  );
};

export default Index;
